<template>
    <div class="fontc0 tl bankt-wrap">
        <mt-header fixed title="银行转账">
            <mt-button icon="back" slot="left"> </mt-button>
        </mt-header>
        <main class="mt50 bgwhite fontc0">
            <div class="BankT flex ml10 mr10 shadow br4">
                <span class="line fl"></span>
                <ul class="flex1 ml10 mr10">
                    <li class="lh50 clearfix btline">
                        <span class="fl fs16 bold label">银行名称</span>
                        <span class="fl fs14 bold fontc2">
                            {{decodeURIComponent(banktinfo.bankName || '%E6%9C%AA%E8%8E%B7%E5%8F%96%E5%88%B0')}}
                        </span>
                        <span
                            class="fr copy fs14 mt10 copy-btn"
                            :data-clipboard-text="decodeURIComponent(banktinfo.bankName || '%E6%9C%AA%E8%8E%B7%E5%8F%96%E5%88%B0')" >
                            复制
                        </span>
                    </li>
                    
                    <li class="lh50 clearfix btline">
                        <span class="fl fs16 bold label">支行信息</span>
                        <span class="fl fs14 bold fontc2">
                            {{decodeURIComponent(banktinfo.bankAddress || '%E6%9C%AA%E8%8E%B7%E5%8F%96%E5%88%B0')}}
                        </span>
                        <span
                            class="fr copy fs14 mt10 copy-btn"
                            :data-clipboard-text="decodeURIComponent(banktinfo.bankAddress || '%E6%9C%AA%E8%8E%B7%E5%8F%96%E5%88%B0')" >
                            复制
                        </span>
                    </li>
                    
                    <li class="lh50 clearfix btline">
                        <span class="fl fs16 bold label">银行卡户名</span>
                        <span class="fl fs14 bold fontc2">
                            {{decodeURIComponent(banktinfo.cardName || '%E6%9C%AA%E8%8E%B7%E5%8F%96%E5%88%B0')}}
                        </span>
                        <span
                            class="fr copy fs14 mt10 copy-btn"
                            :data-clipboard-text="decodeURIComponent(banktinfo.cardName || '%E6%9C%AA%E8%8E%B7%E5%8F%96%E5%88%B0')" >
                            复制
                        </span>
                    </li>

                    <li class="lh50 clearfix btline">
                        <span class="fl fs16 bold label">银行卡号</span>
                        <span class="fl fs14 bold fontc2">
                            {{banktinfo.cardNo || '未获取到'}}
                        </span>
                        <span
                            class="fr copy fs14 mt10 copy-btn"
                            :data-clipboard-text="banktinfo.cardNo || '未获取到'" >
                            复制
                        </span>
                    </li>

                    <li class="lh50 clearfix btline">
                        <span class="fl fs16 bold label">充值金额</span>
                        <span class="fl fs14 bold fontc2">
                            {{banktinfo.money || '未获取到' |formatMoney}}
                        </span>
                        <span
                            class="fr copy fs14 mt10 copy-btn"
                            :data-clipboard-text="banktinfo.money || '未获取到'" >
                            复制
                        </span>
                    </li>

                    <li class="lh50 clearfix btline">
                        <span class="fl fs16 bold label">充值附言</span>
                        <span class="fl fs14 bold fontc2">
                            {{banktinfo.note || '未获取到'}}
                        </span>
                        <span
                            class="fr copy fs14 mt10 copy-btn"
                            :data-clipboard-text="banktinfo.note || '未获取到'" >
                            复制
                        </span>
                    </li>
                </ul>
            </div>

            <div class=" mt20 flex ml10 mr10 shadow br4">
                <span class="line fl"></span>
                <ul class="flex1 ml10 mr10 mt5 pb5">
                    <li class="lh20">
                        <h3 class="bold">温馨提示:</h3>
                        <p class="fontc2">请牢记充值金额、充值附言若填写不一致，可能会造成金额无法自动到账</p>
                    </li>
                   
                </ul>
            </div>
        </main>
    </div>
</template>
<script>
import axios from "axios";
import { MessageBox, Toast } from "mint-ui";
import Clipboard from "clipboard";
import accounting from "accounting";

//account的配置更改
accounting.settings = {
  currency: {
    symbol: "", // default currency symbol is '$'
    format: "%s%v", // controls output: %s = symbol, %v = value/number (can be object: see below)
    decimal: ".", // decimal point separator
    thousand: ",", // thousands separator
    precision: 2 // decimal places
  },
  number: {
    precision: 2, // default precision on numbers is 0
    thousand: ",",
    decimal: "."
  }
};

export default {
  name: "BankT",
  data() {
    return {};
  },
  props: {
    banktinfo: {
      type: Object,
      required: false,
      default: {}
    }
  },
  created() {
    console.log(this);
  },
  mounted() {
    this.copy();
  },
  methods: {
    copy() {
      var clipboard = new Clipboard(".copy-btn");

      clipboard.on("success", e => {
        Toast("文字已复制");
        // 释放内存
      });

      clipboard.on("error", e => {
        // 不支持复制
        Toast("该浏览器不支持自动复制");
        // 释放内存
      });
    }
  },
  filters: {
      formatMoney(money) {
      if (money) {
        return accounting.formatMoney(money);
      } else {
        return "0";
      }
    }
  }
};
</script>
<style scoped>
.bankt-wrap {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow-y: scroll;
  z-index: 999;
}
.line {
  width: 4px;
  background-color: #e94c4b;
}
.btline {
  border-bottom: 1px solid #eee;
}
.label {
  min-width: 100px;
}
.copy {
  border: 1px solid #eee;
  border-radius: 4px;
  line-height: 30px;
  height: 30px;
  width: 50px;
  text-align: center;
}
</style>
